<template>
  <div class="wrap">
    <h2>
      {{ $t("userlogin") }}
    </h2>
    <div class="login-content" v-loading="loginLoading">
      <el-form
        ref="form"
        :model="form"
        label-width="40px"
        label-position="left"
        status-icon
        :rules="rules"
      >
        <el-form-item id="qrcodeitem">
          <div v-if="step == 1">授权成功！</div>
          <div v-if="step == 2">
            <el-form-item prop="phone" label="+86 ">
              <el-input
                v-model="form.phone"
                placeholder="请绑定手机号："
              ></el-input>
            </el-form-item>
            <div class="login-btn">
              <button type="button" @click="toSignUp('form')">确定</button>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template> 
<script>
import { Message } from "element-ui";
import { sinUp, login, dowxlogin, wxRegist } from "../http/api";
import wxlogin from "vue-wxlogin";
export default {
  data() {
    return {
      form: {
        phone: "",
      },
      siteinfo:{},
      step: 1,
      loginLoading: false,
      code: "",
      appid: "wx8a42b7e70e266e71",
      appsecret: "6b0673b945a7f16feacefc016c0ba4a4",
      rules: {
        phone: [{ required: true, message: "手机号不能为空", trigger: "blur" }],
        idcode: [{ required: true, message: "密码不能为空", trigger: "blur" }],
      },
    };
  },
  components: {
    wxlogin,
  },
  metaInfo() {
    return {
      title: this.siteinfo.name,
      meta: [
        {
          vmid: "description",
          name: "description",
          content: this.siteinfo.descript,
        },
         {
          vmid: "keyword",
          name: "keyword",
          content: this.siteinfo.keyword,
        },
      ],
    };
  },
  mounted() {
    this.init();
    
    var siteinfo = localStorage.getItem("site_info")
    if(siteinfo != undefined){
        siteinfo = JSON.parse(siteinfo)
    }
    this.siteinfo = siteinfo; 
  },

  methods: {
    toSignUp(form) {
      var pass = false;
      this.$refs[form].validate((valid) => {
        if (valid) {
          pass = true;
        } else {
          pass = false;
        }
      });
      if (pass == true) {
        this.loginLoading = true;
        this.isLogin = true;
        this.form.code = this.code;
        wxRegist(this.form).then((res) => {
          this.loginLoading = false; 
          console.log(res);
          if (res.data.code == 20000) {
            Message.success("注册成功！");
            res.data.data.avatar = res.data.data.headimgurl;
            res.data.data.name = res.data.data.nickname;
            res.data.data.username = res.data.data.nickname;
            localStorage.setItem("isLogin", true);
            localStorage.setItem("userinfo", JSON.stringify(res.data.data));
            localStorage.setItem("id", res.data.data.id);
            this.$router.push({
              path: "/index",
            });
          } else {
            Message.success("注册失败！");

            this.$router.push({
              path: "/login",
            });
          }
        });
      }
    },
   
    init() {
      this.getwxcode();
    },
    getwxcode() {
      if (this.$route.query.code) {
        this.code = this.$route.query.code;
        let params = {};
        params.code = this.code;
        console.log(params);
        dowxlogin(params).then((res) => {
          console.log(res);
          res = res.data;
          if (res.code == 20000) {
            localStorage.setItem("userinfo", JSON.stringify(res.data));
            localStorage.setItem("id", res.data.id);

            if (res.data.headimgurl != undefined) {
              this.form = res.data; 
              this.step = 2;
            } else if (res.data.avatar != undefined) { 
              localStorage.setItem("isLogin", true);
              localStorage.setItem("userinfo", JSON.stringify(res.data));
              localStorage.setItem("id", res.data.id);
              this.$message({
                message: "登录成功！",
                type: "success",
              });
              this.$router.push({
                path: "/index",
              });
            }
          } else {
            this.$message({
              message: "登录失败！",
              type: "error",
            });
            this.$router.push("/login");
          }
        });
      } else {
        this.$router.push("/login");
      }
    },
  },
};
</script>

<style lang="less" scope>
.wrap {
  h2 {
    font-size: 18px;
    margin: 40px 0;
    padding-bottom: 25px;
    font-weight: 500;
    border-bottom: 0;
  }
  .login-content {
    #qrcodeitem {
      color: green;
      align-items: center;
      text-align: center;
      width: 320px;
      margin-left: 200px;
      max-height: 400px;
      padding: 20px;
      padding-left: 10;
      border: 1px solid gray;
    }
    .el-input__inner {
      -webkit-appearance: none;
      background-color: #fff;
      background-image: none;
      border-radius: 0px;
      border: 0px solid #989898;
      border-bottom: 1px solid #989898;
      box-sizing: border-box;
      color: #989898;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: 0;
      padding: 0 15px;
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      width: 100%;
    }
  }
  .login-remember-wrap {
    padding: 30px 0;
    font-size: 12px;
    color: #000;
    letter-spacing: 1px;
    font-weight: 500;
    text-transform: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    letter-spacing: 2px;
    .login-remember-checkbox {
      display: flex;
      align-items: center;
      label {
        margin-left: 5px;
      }
    }
    .login-remember-lost {
      a {
        font-size: 12px;
        color: #ff0000;
        letter-spacing: 2px;
        font-weight: 500;
      }
      a:hover {
        color: #000;
      }
    }
  }
  .login-btn {
    button {
      background: #4d4d4d;
      font-size: 18px;
      padding: 3px 20px;
      color: #fff;
      margin-top: 25px;
      border: 0 none;
      cursor: pointer;
      height: 40px;
      line-height: 40px;
    }
    button:hover {
      background-color: #f00;
    }
  }
}
</style>